<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="entity.Page" %>
<%@ page import="entity.materialBean" %>
<%@ page import="dao.materialDAO" %>
<%@ page import="java.util.List" %>
<%@ page import="utils.StrFilter" %>

<%
    request.setCharacterEncoding("UTF-8");
    response.setContentType("text/html; charset=UTF-8");
%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>设备管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/material_list.css">

</head>
<body>
<%
    String name=StrFilter.filter((String)request.getAttribute("name"));
    String id=StrFilter.filter((String)request.getAttribute("id"));
    String type=StrFilter.filter((String)request.getAttribute("type"));
%>
        <div id="container" >
            <div id="headDiv">
                <div id="logo">
                    <img src="../img/logo_search.png" width="30" height="30" alt=""/>
                </div>
                <div id="title">物料查询</div>
            </div>
            <div id="query">
                <form action="<%=request.getContextPath()%>/group/material/material_list" method="post">

                    <span>物料名称</span>
                    <label for="name" class="required-field"></label>
                    <input type="text" id="name" name="name" value="<%=name%>">
                    <span>物料编号</span>
                    <label for="id" class="required-field"> </label>
                    <input type="text" id="id" name="id" value="<%=id%>">
                    <span>材料类型</span>
                    <label for="type" class="required-field"> </label>
                    <select name="type" id="type">
                        <option></option>
                        <option value="金属" <%= type.equals("金属") ? "selected" : "" %>>金属</option>
                        <option value="合金" <%= type.equals("合金") ? "selected" : "" %>>合金</option>
                        <option value="复合材料" <%= type.equals("复合材料") ? "selected" : "" %>>复合材料</option>
                        <option value="有机材料" <%= type.equals("有机材料") ? "selected" : "" %>>有机材料</option>
                        <option value="其他" <%= type.equals("其他") ? "selected" : "" %>>其他</option>
                    </select>
                    <input class="bkg1" type="submit" id="submit" value="查询" onclick="">
                    <input class="bkg2" type="button" id="reset" value="重置" onclick="cleanInput()">
                    <button class="bkg3" id="add"><a href="material_edit?r_id=-1" >新增</a></button>
                </form>
<%--            <div class="tab-container">--%>
<%--                <div id="tab-line">--%>
<%--                    <!-- 标签页选项卡 -->--%>
<%--                    <div class="tab active" onclick="openTab(event,'tab1')">待审核</div>--%>
<%--                    <div class="tab" onclick="openTab(event,'tab2')">已通过</div>--%>
<%--                    <div class="tab" onclick="openTab(event,'tab3')">已否决</div>--%>
<%--                </div>--%>

                <!-- 标签页内容 -->
                <div id="tab1" class="tab-content" style="display:block;">
                    <table>
                        <tr>
                            <th>序号</th>
                            <th>物料名称</th>
                            <th>物料编号</th>
                            <th>材料类型</th>
                            <th>供应商</th>
                            <th>入库时间</th>
                            <th>规格</th>
                            <th>联系人</th>
                            <th>联系电话</th>
                            <th>物料说明</th>
                            <th>操作</th>
                        </tr>

                        <%
                            List<materialBean> materialBeanList=(List<materialBean>) request.getAttribute("list");
                            if (materialBeanList != null){
                            for (materialBean obj:materialBeanList) {
                                System.out.println(obj.toString()); // 输出bean内容
                        %>
                        <tr>
                            <td><%=obj.getNum()%></td>
                            <td><%=obj.getName()%></td>
                            <td><%=obj.getId()%></td>
                            <td><%=obj.getType()%></td>
                            <td><%=obj.getManufacturer()%></td>
                            <td><%=obj.getProductiondate()%></td>
                            <td><%=obj.getFactorysite()%></td>
                            <td><%=obj.getContacts()%></td>
                            <td><%=obj.getTelephone()%></td>
                            <td><%=obj.getStatement()%></td>


                            <td>
                                <button class="button1" onclick="editRecord(<%=obj.getR_id()%>)">编辑</button>
                                <button class="button2" onclick="deleteRecord(<%=obj.getR_id()%>)">删除</button>
                            </td>
                        </tr>

                        <%
                            }
                            }
                        %>

                    </table>

                    <div class="pagination">
                        <%Page materialPage=(Page)request.getAttribute("materialPage");
                        if(materialPage!=null){
                        %>
                        <% if(materialPage.getCurrentPage() > 1) { %>
                        <button class="prev" onclick="goToPrevPage()">&laquo; 上一页</button>
                        <% } %>

                        <% for(int i = Math.max(1, materialPage.getCurrentPage() - 4); i <= Math.min(materialPage.getCurrentPage() + 4, materialPage.getTotalPage()); i++) { %>
                        <button onclick="goToNum(<%= i %>)" <% if(i == materialPage.getCurrentPage()) { %>class="active"<% } %>><%= i %></button>
                        <% } %>


                        <% if(materialPage.getCurrentPage() < materialPage.getTotalPage()) { %>
                        <button class="next" onclick="goToNextPage()">下一页 &raquo;</button>
                        <% } %>

                        <button onclick="goToFirst()">首页</button>
                        <button onclick="goToLast()">尾页</button>
                        <%}%>
                    </div>


<%--                </div>--%>
<%--                <div id="tab2" class="tab-content">--%>
<%--                    <h3>标签页2内容</h3>--%>
<%--                    <p>这是标签页2的内容。</p>--%>
<%--                </div>--%>
<%--                <div id="tab3" class="tab-content">--%>
<%--                    <h3>标签页3内容</h3>--%>
<%--                    <p>这是标签页3的内容。</p>--%>
<%--                </div>--%>

            </div>
        </div>
</body>

<script>
    function goToNum(i){

        <%if(materialPage!=null){%>
        // 这里可以实现跳转到下一页的逻辑，例如递增页数
        // 构建新的URL并重定向
        window.location.href = '?currentPage=' + i+"&name="+document.getElementById("name").value+"&id="+document.getElementById("id").value+"&type="+document.getElementById("type").value;

        <%}%>

    }
    function goToFirst(){
        <%if(materialPage!=null){%>
        // 这里可以实现跳转到下一页的逻辑，例如递增页数
        var nextPage = <%=1  %>;

        // 构建新的URL并重定向
        window.location.href = '?currentPage=' + nextPage+"&name="+document.getElementById("name").value+"&id="+document.getElementById("id").value+"&type="+document.getElementById("type").value;

        <%}%>

    }

    function goToLast(){
        <%if(materialPage!=null){%>
        // 这里可以实现跳转到下一页的逻辑，例如递增页数
        var nextPage = <%=materialPage.getTotalPage()  %>;

        // 构建新的URL并重定向
        window.location.href = '?currentPage=' + nextPage+"&name="+document.getElementById("name").value+"&id="+document.getElementById("id").value+"&type="+document.getElementById("type").value;
        <%}%>
    }
     function goToNextPage() {
        <%if(materialPage!=null){%>
        // 这里可以实现跳转到下一页的逻辑，例如递增页数
        var nextPage = <%= materialPage.getCurrentPage()+1  %>;

        // 构建新的URL并重定向
        window.location.href = '?currentPage=' + nextPage+"&name="+document.getElementById("name").value+"&id="+document.getElementById("id").value+"&type="+document.getElementById("type").value;

        <%}%>
    }

    function goToPrevPage(){
        <%if(materialPage!=null){%>
        // 这里可以实现跳转到下一页的逻辑，例如递增页数
        var nextPage = <%= materialPage.getCurrentPage()-1  %>;

        // 构建新的URL并重定向
        window.location.href = '?currentPage=' + nextPage+"&name="+document.getElementById("name").value+"&id="+document.getElementById("id").value+"&type="+document.getElementById("type").value;

        <%}%>
    }

    function openTab(event, tabName) {
        // 获取所有标签页内容元素
        var tabContent = document.getElementsByClassName("tab-content");

        // 隐藏所有标签页内容
        for (var i = 0; i < tabContent.length; i++) {
            tabContent[i].style.display = "none";
        }

        // 移除所有标签页选项卡的 active 类
        var tabs = document.getElementsByClassName("tab");
        for (var i = 0; i < tabs.length; i++) {
            tabs[i].className = tabs[i].className.replace(" active", "");
        }

        // 显示当前选中标签页内容
        document.getElementById(tabName).style.display = "block";

        // 添加 active 类到当前选中标签页选项卡
        event.currentTarget.className += " active";
    }

        function deleteRecord(id) {
        if (confirm("确定要删除这条记录吗？")) {
        // 发送删除请求到服务器
            window.location.href = "<%=request.getContextPath()%>/group/material/material_delete?r_id=" + id;
    }
    }
        function editRecord(id) {
        if (confirm("确定要编辑这条记录吗？")) {
            // 发送删除请求到服务器
            window.location.href = "material_edit?r_id=" + id;
        }
    }
    function cleanInput(){
        document.getElementById("name").value = "";
        document.getElementById("id").value = "";
        document.getElementById("type").selectedIndex = 0;
    }

</script>